<template>
    <div class="second_level_page bill_page">
        <v-scroll class="my_scroll" :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" >
            <ul>
              <li v-for="(item,index) in listdata">
                 <div class="time"><span>{{item.createTime | formateDate}}</span></div>
                 <div class="bill_box">
                   <div class="top">{{item.mark}}</div>
                   <div class="middle">
                      <h2>本金</h2>
                      <p>￥{{item.amount ? fmoney(item.amount) : 0.00}}</p>
                   </div>
                   <div class="sm clear"><span class="left">信用额度</span><span class="right">￥{{item.creditAmount ? fmoney(item.creditAmount) : 0.00}}</span></div>
                   <div class="sm no_margin clear"><span class="left">奖励金</span><span class="right">￥{{item.rewardAmount ? fmoney(item.rewardAmount) : 0.00}}</span></div>
                   <div class="bottom clear"><span class="left">久币数量</span><span class="right">{{item.jiubi ? item.jiubi : 0}}</span></div>
                 </div>
              </li>
            </ul>
        </v-scroll>
        <div v-if="Object.keys(listdata).length == 0" class="no_data">
            <img src="../../../images/no_data.png" alt="">
        </div>         
    </div>
</template>

<script>
import headTop from 'src/components/header/head'
import Scroll from 'src/components/common/pulldown';
import {mapState} from 'vuex'
import {getSellerAccountList} from 'src/service/getData'
import {fmoney} from 'src/config/mUtils'
import {formatDate} from 'src/config/date.js'

export default {
    data(){
        return{
            token:'',
            pageStart:1,
            pageEnd:10,
            loadingText:'加载中...',
            counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
            num : 10,  // 一次显示多少条
            listdata: [], // 下拉更新数据存放数组
            downdata: [],  // 上拉更多的数据存放数组
            nowDate:'',//时间
            fmoney,
        }
    },
    mounted () {
        this.initData();
    },
    components: {
        headTop,
        'v-scroll':Scroll
    },
    computed:{
        ...mapState([
            'userInfo',
        ]),
    },
    filters:{
        formateDate(myTime)
        {
            let time=new Date(myTime);
            return formatDate(time,"yyyy-MM-dd hh:mm:ss");
        }
    },
    methods:{
        //初始化数据
        async initData(){
            this.counter = 1;
            this.pageStart = 1;
            this.pageEnd = 10;
            this.token = this.userInfo.token;
            let data = await getSellerAccountList(this.token,this.pageStart,this.pageEnd);
            this.listdata = data.data;
            if(this.listdata.length==0){
              this.loadingText="您还没有资产明细记录！";
            }
            //启动上拉加载功能
            this.$el.querySelector('.load-more').style.display = 'block';
        },
        //下拉刷新，count=2，从第二页开始加载数据
        onRefresh(done) {
            this.loadingText='加载中……';
            this.initData();
            done() // call done
        },
        //上拉加载，
        async onInfinite(done){
            this.counter++;
            this.pageEnd = this.num * this.counter;
            this.pageStart = this.pageEnd - this.num+1;
            let arr = await getSellerAccountList(this.token,this.pageStart,this.pageEnd);
            this.downdata = arr.data;
            this.listdata = this.listdata.concat(this.downdata);
            if(this.num > this.downdata.length){
                //禁用上拉加载功能
                this.loadingText='加载完毕……';
                this.$el.querySelector('.load-more').style.display = 'none';
            }
            done() // call done
        }
            
    },
    watch:{
        userInfo:function(value){
            this.initData();
        }
    }
}

</script>

<style lang="scss" scoped>
    .bill_page ul li{padding:0 .28rem;}
    .bill_page ul li:last-child{margin-bottom: .4rem;}
    .my_scroll{top: 0; background: #f4f4f4;}
    .yo-scroll .pull-refresh{font-size: .2rem; color: #999}
    .time{text-align: center;margin:.26rem 0; font-size: 0; line-height: 0;}
    .time span{ line-height:.4rem;background:rgba(0,0,0,0.3);color:#fff;font-size:.22rem;border-radius:.08rem;padding:0 .1rem;}
    .bill_box{background:#fff;border-radius:.1rem;}
    .bill_box .top{padding:.3rem;font-size:.32rem;color:#333;}
    .bill_box .middle{text-align: center;}
    .bill_box .middle h2{font-size:.28rem;color:#999;}
    .bill_box .middle p{font-size:.36rem;color:#ffa101;margin-top:.18rem;}
    .bill_box .sm{margin-top:.48rem;padding:.24rem;font-size:.28rem;color:#666;border-bottom:.02rem dashed #dfdfdf;}
    .bill_box .sm{margin-top:0;}
    .bill_box .sm .right{color:#333;}
    .bill_box .bottom{padding:.24rem;font-size:.28rem;color:#666;}
    .bill_box .bottom .right{color:#333;}
    .no_data{position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; padding-top: 3.5rem; background: #f4f4f4; z-index: 10;}
    .no_data img{width:1.88rem; height:2.6rem;}
</style>
